<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖页面</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }

        #intro-gif-container,
        .lottery-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .result-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
            z-index: 999;
            width: 300px;
        }
        #start-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 16px;
            font-size: 20px;
            background-color: #4CAF50; /* 可自定义按钮背景色 */
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            z-index: 999;
            outline: none;
        }
    </style>
</head>
<body>
    <!-- <script>
        if (!isWeiXin()) {
            document.body.innerHTML = '<h1 style="text-align: center;">请在微信内打开此页面参与抽奖活动！</h1>';
            return;
        }

        function isWeiXin() {
            return /MicroMessenger/i.test(navigator.userAgent);
        }
    </script> -->
    <!-- <button id="start-btn" onclick="startLottery()">开始抽奖</button> -->

    <!-- 抽奖GIF部分 -->
    <div id="intro-gif-container">
        <img id="intro-gif" src="gamecity.gif" alt="抽奖GIF" style="display:none;">
    </div>


    
    <!-- 下面部分是源代码 -->
    <!-- 抽奖GIF部分 -->
    <!-- <div id="intro-gif-container">
        <img id="intro-gif" src="dog.gif" onload="onGifLoaded()" alt="抽奖GIF">
    </div> -->
    <audio id="bg-music" src="bgm.MP3" loop autoplay style="display:none;"></audio>

    <!-- 抽奖结果弹窗区域 -->
    <div class="result-popup" id="result-popup" onclick="closePopup()">
        <h2>恭喜您，抽中了：</h2>
        <p id="result-text"></p>
    </div>

    <script>

        let bgMusic;
           window.onload = function() {
            // if (!isWeiXin()) {
            //     document.body.innerHTML = '<h1 style="text-align: center;">请在微信内打开此页面参与抽奖活动！</h1>';
            //     return;
            // }
            // 若在微信内，则预加载GIF和音频资源以确保后续能立即播放
            
            
            const introGif = document.getElementById('intro-gif');
            bgMusic = document.getElementById('bg-music'); // 在window.onload事件触发后获取背景音乐元素

            introGif.src = introGif.src;
            bgMusic.src = bgMusic.src;
            startLottery();
             // 触发音频资源加载
            //  bgMusic.play(); // 播放背景音乐
        }
        function startLottery() {
            // document.getElementById('start-btn').style.display = 'none'; // 隐藏开始按钮
            document.getElementById('intro-gif').style.display = 'block'; // 显示抽奖GIF
            bgMusic.play(); // 播放背景音乐

            setTimeout(showResult, 19000); // GIF加载完后等待2秒显示抽奖结果

        }
        const prizes = ['一号盲盒奖'];
        let winnerIndex;

        // function onGifLoaded() {
        //     setTimeout(showResult, 2000); // GIF加载完后等待2秒显示抽奖结果
        // }

        function showResult() {
            bgMusic.pause(); // 关闭弹窗时暂停背景音乐
            document.getElementById('intro-gif-container').style.display = 'none';

            // 随机选择一个奖项
            winnerIndex = Math.floor(Math.random() * prizes.length);

            // 设置弹窗内容
            const resultText = document.getElementById('result-text');
            resultText.textContent = prizes[winnerIndex];

            // 显示弹窗
            document.getElementById('result-popup').style.display = 'block';
        }

        // function closePopup() {
        //     document.getElementById('result-popup').style.display = 'none';
        // }
        
        function closePopup() {
            document.getElementById('result-popup').style.display = 'none';
            
            document.getElementById('intro-gif').style.display = 'none'; // 隐藏抽奖GIF
            document.getElementById('start-btn').style.display = 'block'; // 显示开始按钮
        }


     
    </script>

</body>
</html>